import React, { Component } from 'react'
import '../assets/css/play.css';
export default class Play extends Component {
    constructor() {
        super();
        this.state = {
            // 音乐播放状态: true显示播放按钮, false显示暂停按钮
            status: true,
            deg: '-15deg',
            // 歌曲信息
            info: {},
            // 歌词
            lyric:[],
            // 音乐播放地址
            playUrl:''
        }
    }
    render() {
        return (
            <div className="play-container">
                {/* 音乐播放控件 */}
                <div style={{ transform: `rotate(${this.state.deg})` }} className="play-control"></div>
                <div className="play-box">
                    <img className={this.state.status ? '' : 'rotate'} src={this.state.info.picUrl} alt="" />
                    <div onClick={() => this.toggle()} className={['btn', this.state.status ? 'btn-play' : 'btn-pause'].join(' ')}></div>
                </div>
                <audio ref={(dom)=>this.music=dom} controls style={{display:'none'}} src={this.state.playUrl}></audio>
                {/* 歌词 */}
                <div className="content">
                    <h3>{this.state.info.name}</h3>
                    <div>
                        {
                            this.state.lyric.map((item,index)=><p key={index}>{item}</p>)
                        }
                    </div>
                </div>
            </div>
        )
    }

    componentWillMount() {
        this.getDetail();
        this.getLyric();
        this.getPlayUrl();
    }

    // 切换音乐播放状态
    toggle() {
        // 1-切换按钮   
        const deg = this.state.status ? 0 : '-15deg';
        this.setState({ status: !this.state.status, deg },()=>{
             // 2-切换音乐播放
            if(this.state.status){
                this.music.pause();
            }else{
                this.music.play();
            }
        });
       
    }
    // 获取音乐详情
    async getDetail() {
        const ids = this.props.match.params.id;
        const res = await this.$http.get('/song/detail', { params: { ids } });
        if (res.code === 200) {
            // console.log(res);
            this.setState({ info: res.songs[0].al });
        }
    }

    // 获取音乐播放地址
    async getPlayUrl() {
        const id = this.props.match.params.id;
        const res = await this.$http.get('/song/url', { params: { id } });
        if (res.code === 200) {
            const playUrl=res.data[0].url;
            this.setState({playUrl});
        }
    }

    // 获取歌词
    async getLyric() {
        const id = this.props.match.params.id;
        const res = await this.$http.get('/lyric', { params: { id } });
        if (res.code === 200) {
            // console.log(res);
            // 处理歌词
            const lyric=this.lyricFmt(res.lrc.lyric);
            this.setState({lyric});
        }
    }

    // 歌词格式化
    lyricFmt(lyric){
        const reg=/\[(.*)\](.*)/g;
        const arr=[];
        lyric.replace(reg,(a,b,c)=>{
            arr.push(c);
        });
        return arr;
    }
}
